<!--
 * @Author Shunzi
 * @Date 2021-07-14 00:55:13
 * @LastEditTime 2021-07-16 11:38:27
 * @LastEditors Shunzi
 * @Description 
 * @FilePath /BFFNodeServer/views/create.html
-->
{% extends 'layout.html' %} {% block title %}{{title}}{% endblock %} {% block
head %}
<link rel="stylesheet" type="text/css" href="stylesheets/index.css" />

<script src="javascripts/index.js"></script>
{% endblock %} {% block content %}

<form id="addbook" method="post" action="/create">
  <div class="form-group">
    <label for="name">书名</label>
    <input
      name="name"
      type="text"
      class="form-control"
      id="name"
      aria-describedby="nameHelp"
    />
    <small id="nameHelp" class="form-text text-muted"></small>
  </div>
  <div class="form-group">
    <label for="author">作者</label>
    <input
      name="author"
      type="text"
      class="form-control"
      id="author"
      value="1231"
    />
  </div>
  <div class="form-group">
    <label for="subject">类目</label>
    <input name="subject" type="text" class="form-control" id="subject" />
  </div>
  <div class="form-group">
    <label for="ISBN">ISBN</label>
    <input name="ISBN" type="number" class="form-control" id="ISBN" />
  </div>
  <div class="form-group">
    <label for="describe">简介</label>
    <input name="describe" type="text" class="form-control" id="describe" />
  </div>
  <button id="submit" type="submit" class="btn btn-primary">添加</button>
  <a type="button" href="/books" class="btn btn-light">取消</a>
</form>
<script>
  $("#submit").click((e) => {
    e.preventDefault();
    const data = {};
    Array.from($("#addbook")[0]).forEach((input) => {
      if (input instanceof HTMLInputElement) {
        data[input.name] = input.value;
      }
    });

    $.ajax({
      url: "create",
      type: "POST",
      data,
      success(res) {
        $("#addbook")[0].reset();
        if (res.success) {
          alert("添加成功");
          window.location.href = "/books";
        } else {
          alert("添加失败");
        }
      },
      error() {},
    });
    return false;
  });
</script>

{% endblock %}
